<template>
    <div>
      <!-- 头部导航 -->
      <el-row class="top">
        <el-col :span="2"><div class="grid-content" @click="home">网站首页</div></el-col>
        <el-col :span="15"><div class="grid-content" @click="home">网站</div></el-col>
        <el-col :span="2"><div class="grid-content" @click="goto">退出登录</div></el-col>
        <el-col :span="2"><div class="grid-content">简介</div></el-col>
        <el-col :span="2"><div class="grid-content" @click="shoppingcart">购物车</div></el-col>
      </el-row>
  
      <!-- 简介 -->
      <div class="aboutus">
        <div class="title">
          <el-divider content-position="center">简介</el-divider>
          <p><el-tag>莫比乌斯商城</el-tag><el-tag>羽蛇</el-tag></p>
        </div>
        <el-card class="box-card" style="margin-bottom: 20px;">
          <div class="text item">
            <el-row :gutter="110">
              <el-col :span="8">
                <div class="grid-content">
                  于2023年3 月11日成立<span class="large">莫比乌斯商城</span>，总公司位于圣塞西尔学院内部
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content">
                   我们怀抱着便利人民便利学子的愿望开设了莫比乌斯线上商城，我们的愿望是，零差评赛博shopping！
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content">
                  有问题可以联系我们，我们一定会竭尽全力解决（尽量）
                  热线电话：400-820-8820
                </div>
              </el-col>
            </el-row>
          </div>
          <div class='topMask square'></div><div class='topMask circular'></div>
        </el-card>
      </div>
  </div>
  </template>
  
  <script>
  import {mapMutations} from 'vuex'
  export default {
    name: "admin",
    methods:{
      /* 向shop组件跳转 */
      home(){
        this.$router.push('/shop')
      },
  
      /* 退出登录功能 */
      goto(){
        this.$confirm('是否退出登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          /* 确定退出事件回调 */
          this.$message({
            type: 'success',
            message: '退出成功!',
          });
          this.$router.push('/')
        }).catch(() => {
          /* 取消退出事件回调 */
          this.$message({
            type: 'info',
            message: '取消退出'
          });
        });
      },
      /* 向shopcart跳转 */
      shoppingcart(){
        this.$router.push('/shoppingcart')
      },
  
      //方法集合
      ...mapMutations(['changeNum'])
    }
  }
  </script>
  
  
  <style scoped>
    .top{
      height: 40px;
      background: rgb(191, 130, 144);
      color: #ffffff;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .top div{
      cursor: pointer;
    }
  
  .aboutus{
      font-size: 14px;
      text-align: left;
      padding: 0px 100px;
    }
    .intro{
      width: 200px;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
    .text {
      font-size: 14px;
      text-align: left;
      line-height: 30px;
      text-indent: 2em;
    }
    .box-card{
      position: relative;
    }
    .item {
      display: inline-block;
      margin: 30px 50px;
    }
    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }
    .clearfix:after {
      clear: both
    }
    .clearfix span{
      color: #fff;
      font-weight: bold;
    }
    .title p{
      color: #8c8888;
      font-size: 15px;
      margin-bottom: 80px;
      text-align: center;
    }
    .grid-content{
      font-size: 20px;
      color: skyblue;
    }
    .grid-content .large{
      font-size: 25px;
      color: #ff6c80;
      font-weight: bold;
    }
    .topMask{
      width: 100px;
      height: 100px;
      background-color: rgba(255, 167, 191, 0.2);
      transform: rotate(45deg);
      position: absolute;
    }
    .square{
      border-radius: 5px;
      top: 0px;
    }
    .circular{
      border-radius: 50%;
      top:80px;
      left: 80%;
      background-color: rgba(255, 208, 75,0.2);
    }
  
  </style>
  